<!--
*@Author: QWP
*@Description: 司机管理
*@Date 2024-07-15 09:58
-->
<template>
  <a-layout
    class="f-h-100 s-bg-white">
    <u-search-header>
      <u-form
        :model="searchF.model"
        :gutter="16"
        :elements="searchEl"
        class="f-w-auto"
        :isSearch="true"
        @formChange="getSearch(1)">
        <a-col>
          <a-space>
            <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            <u-icon-button
              itype="export"
              @click="exportBtn">
              导出
            </u-icon-button>
          </a-space>
        </a-col>
        <a-col flex="1">
          <a-row justify="end">
            <a-space>
              <u-icon-button
                itype="add"
                @click="toEdit(1)">
                新增
              </u-icon-button>
              <u-icon-button
                itype="edit"
                @click="toEdit(2)">
                修改
              </u-icon-button>
              <u-icon-button
                itype="delete"
                @click="deleteBtn">
                删除
              </u-icon-button>
            </a-space>
          </a-row>
        </a-col>
      </u-form>
    </u-search-header>
    <u-table-content class="f-padding-rl24">
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"
        :loading="loading"
        @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
        @change="getSearch()"></u-table>
    </u-table-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    width="800px"
    :keyid="keyid"
    :title="dialogTitle"
    @close="keyid = ''"
    @success="
      showEdit = false;
      getSearch();
    " />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { numberC, alertC, messageC } from "@/util/common";
import { formatAmt } from "@/util/format.ts";
import dayjs from "dayjs";
import Edit from "./Edit.vue";
import { cloneDeep } from "lodash";
import * as driverApi from "@/service/administration/driver";

const route = useRoute();
const router = useRouter();

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: (total) => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    keywords: "",
  },
});
const formItemProps: FormItemProps = {
  labelWidth: "60px",
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: "关键字",
    key: "keywords",
    element: "input",
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: { placeholder: "车牌号、部门、驾驶员" },
  },
];

// 列表
const loading = ref<boolean>(false);
const tabSelData = ref<any[]>([]);
const tabData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "index", title: "序号", width: 50, align: "center", customRender: ({ index }) => (index += 1) },
  { dataIndex: "platenumber", title: "车牌号", minWidth: 100, align: "center" },
  { dataIndex: "ssdeptname", title: "所属部门", minWidth: 100 },
  { dataIndex: "drivername", title: "执行司机", minWidth: 150 },
  { dataIndex: "driverphone", title: "司机电话", minWidth: 150, align: "center" },
  {
    dataIndex: "entrydate",
    title: "入职时间",
    minWidth: 150,
    align: "center",
    customRender: ({ text }) => {
      return (text || "").split(" ")[0];
    },
  },
  { dataIndex: "paycard", title: "工资卡", minWidth: 150, align: "center" },
  { dataIndex: "businesscard", title: "公务卡", minWidth: 150, align: "center" },
]);

// 编辑
const keyid = ref<string>("");
let dialogTitle = ref<string>("司机信息编辑");
let showEdit = ref<boolean>(false);

onMounted(() => {
  getSearch();
});

// 列表查询
const getSearch = async (current) => {
  if (current == 1) {
    pagenation.current = current;
  }
  loading.value = true;
  try {
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    const data = await driverApi.page(searchF);
    if (data.code == 0) {
      tabData.value = data.data.records;
      pagenation.total = data.data.total;
    }
    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};

// 查询车牌号以及车辆主键
const getPlateNumber = async () => {
  // this.cpData.splice(0,this.cpData.length)
  //   car_drive_info_service.getselectPlateNumber2('type=1').then(res =>{
  //   if(res.data.code == 0){
  //     res.data.data.forEach(item =>{
  //       this.cpData.push({name:item.platenumber,id:item.keyid})
  //     })
  //   }
  // })
};

// type 1 新增    2 修改
const toEdit = (type: number) => {
  if (type == 2) {
    if (tabSelData.value.length !== 1) {
      messageC("能且只能选择一条数据", "warning");
      return;
    }
    keyid.value = type == 2 ? tabSelData.value[0].keyid : "";
  }
  showEdit.value = true;
  dialogTitle.value = "司机信息编辑";
};

// 删除
const deleteBtn = async () => {
  if (tabSelData.value.length == 0) {
    messageC("请先选择要删除的数据!", "warning");
    return;
  }
  let ids = tabSelData.value.map((item) => item.keyid);
  alertC("确认删除选中的数据?", "confirm").then(async () => {
    try {
      loading.value = true;
      const data = await driverApi.del({ ids: ids.join(",") });
      if (data.code == 0) {
        getSearch();
        messageC(data.msg, "success");
      } else {
        messageC(data.msg, "warning");
      }
    } catch (error) {}
    loading.value = false;
  });
};

// 导出
const exportBtn = async () => {
  loading.value = true;
  try {
    const res = await driverApi.download({ ...searchF, size: -1, filename: "驾驶员配置信息" });
  } catch (error) { }
  loading.value = false;
};
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
